<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>用户测试用例</title>
<!-- <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" /> -->
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js"></script>
<style>
*{
padding:0px;
margin:0px;
cursor: pointer;
}
.main{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
display: flex;

}

.video-tab{
width:300px;
height:90%;
border-right:1px solid #ccc;
}

.video-tab ul{
width:100%;
}
.video-tab ul li{
list-style: none;
width:100%;
height:50px;
line-height: 50px;
text-align: center;
border-bottom:1px solid #dedede;
}

.video-box{
flex:1;
height:90%;
}
</style>
</head>
<body>
<div class="main">
<div class="video-tab">
<ul>
<li url='rtmp://115.231.122.2:1935/service/PuId-ChannelNo=122719000100003107-03&PlayMethod=0&StreamingType=1'>hello</li>
<li url='rtmp://115.231.122.2:1935/service/PuId-ChannelNo=122719000100003107-01&PlayMethod=0&StreamingType=1'>world</li>
<li>养老</li>
<li>养生</li>
<li>百讲堂</li>
</ul>
</div>
<div class="video-box">
<div  class="prism-player" id="J_prismPlayer" style='margin:20px auto'></div>    
</div>
</div>

</body>

<script>




window.onload=function(){
	var videoUrl='rtmp://115.231.122.2:1935/service/PuId-ChannelNo=122719000100003107-03&PlayMethod=0&StreamingType=1';
	video(videoUrl);
	
}


function video(videoUrl){

var player = new Aliplayer({
id: 'J_prismPlayer',
width: '90%',
height:'90%',
autoplay: true,
useH5Prism:true,
showBuffer:true,
source : videoUrl,
},function(player){
player.play();
});
}

</script>
</html>
